@import "tablet-heights";
@import "colors";

@media screen and (max-width: 992px) {
  header {
    width: unset;
  }
  header,
  header #navbar {
    position: fixed;
    z-index: 5;
    top: 0;
    height: $header-height;
    background-color: $navy-darker;
  }
  header #navbar .logo {
    padding-top: 10px;
    padding-left: 25px;
    margin: 0;
  }
  header #navbar .logo img {
    height: 20px;
    width: auto;
  }

  header #navbar #dropdown-dots,
  header #navbar-small #dropdown-dots .dropdown-dots-small {
    top: 10px;
    right: 20px;
    width: 20px;
    display: grid;
    grid-template-columns: repeat(3, 5px);
    grid-template-rows: repeat(3, 5px);
    grid-gap: 2.5px;
    .dropdown-dot-top {
      padding: 0;
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }
    .dropdown-dot-middle {
      padding: 0;
    }
    .dot-1 {
      grid-column: 1 / 1;
      grid-row: 2 / 3;
    }
    .dot-2 {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }
    .dot-3 {
      padding-left: 1px;
      grid-column: 3 / 4;
      grid-row: 2 / 3;
    }
    .dropdown-dot-bottom {
      padding: 1px 0 0 0;
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }
  }

  header #navbar ul.main-menu {
    display: none;
  }
  .menu-blog-link {
    display: none;
  }

  header #submenu-dots {
    position: fixed;
    margin: 0;
    top: calc(#{$header-height} - 1px);
    right: 0;
    width: 225px;
    padding: 20px 10px 50px 10px;
    background-color: $navy-darker;
  }

  .grid-menu {
    height: 200px;
    width: 240px;
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    grid-template-rows: repeat(4, 1fr);
  }

  header #submenu-dots {
    .grid-mob-menu {
      height: 175px;
      display: grid;
      grid-template-columns: 0.3fr 0.7fr;
      grid-template-rows: repeat(4, 1fr);
    }
    a.twitter-icon,
    a.discourse-icon,
    a.github-icon {
      height: 25px;
      width: 25px;
    }
    a.twitter-icon,
    a.discourse-icon,
    a.github-icon,
    a.mob-nav-item-1,
    a.mob-nav-item-2,
    a.mob-nav-item-3,
    a.mob-nav-item-4 {
      &::after {
        display: none;
      }
    }
    a.twitter-icon {
      grid-column: 1 / 1;
      grid-row: 1 / 1;
    }
    a.discourse-icon {
      align-self: end;
      grid-column: 1 / 1;
      grid-row: 2 / 3;
    }
    a.github-icon {
      grid-column: 1 / 1;
      grid-row: 4 / 5;
    }

    a.mob-nav-item-1,
    a.mob-nav-item-2,
    a.mob-nav-item-3,
    a.mob-nav-item-4 {
      text-align: right;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: 900;
      color: $aqua;
      padding-right: 0;
    }
  }

  a.mob-nav-item-1 {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  a.mob-nav-item-2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  a.mob-nav-item-3 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  a.mob-nav-item-4 {
    grid-column: 2 / 3;
    grid-row: 4 / 4;
  }

  header #submenu-dots li a::after {
    right: 15px;
  }

  header #submenu-dots {
    overflow-y: scroll;
    a {
      text-transform: uppercase;
      font-weight: 900;
    }
    p {
      color: $white;
      width: 210px;
    }
    li.sub-item a {
      margin-right: -5px;
    }
  }
}
